const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports ={
    mode:'production',
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    module:{
        rules:[
            // ES6 => ES5 @babel/core babel-loader @babel/preset-env
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env']
                    }
                }
            },
            // css样式 style-loader css-loader less-loader less 
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            // 图片资源处理 url-loader file-loader
            {
                test:/\.(png|jpg|jpeg|gif|bmp)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:1024,
                        fallback:{
                            loader:'file-loader',
                            options:{
                                name:'[name].[ext]'
                            }
                        }
                    }
                }
            },
            // 视频音频资源 与图片资源的loader一样
            {
                test:/\.(mp4|wav|ogg|mp3)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:1024 ,
                        fallback:{
                            loader:'file-loader',
                            options:{
                                name:'[name].[ext]'
                            }
                        }
                    }
                }
            },
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./public/index.html',
            filename:'index.html',
            title: 'Vue3 + TS -> Web App', //动态网页title标题，需要在index.html的title中内容配置<%= htmlWebpackPlugin.options.title %>
            minify:{
                collapseWhitespace:true, //去空格
                removeComments:true //去注释
            }
        }),
        new CleanWebpackPlugin()
    ],
    // 热更新
    devServer:{
        port:3002,
        hot:true,
        open:true,
        contentBase:'../dist'
    }
}